<template>
  <div class="add_con">
    <el-card class="box-card">
      <div>
        <span class="el-icon-goods"></span>
        <span> 添加商品信息</span>
      </div>
    </el-card>

    <el-card class="box-card">
      <div>
        <!-- :model="listQuery" 添加数据时需要提交的表单内容 放到
        :rules="rules" 验证内容
          -->
        <el-form
          :model="listQuery"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <!-- 商品分类 -->
          <el-form-item label="商品分类:" prop="name">
            <el-cascader
              v-model="productCateValue"
              :options="productCateOptions"
            ></el-cascader
          ></el-form-item>
          <el-form-item label="商品名称:" prop="name">
            <el-input v-model="listQuery.name"></el-input>
          </el-form-item>
          <el-form-item label="副标题:" prop="sub_title">
            <el-input v-model="listQuery.sub_title"></el-input>
          </el-form-item>
          <el-form-item label="商品品牌:" prop="brand_id">
            <el-select v-model="listQuery.brand_id" placeholder="全部">
              <el-option
                v-for="item in brandOptions"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品介绍:" prop="description">
            <el-input v-model="listQuery.description"></el-input>
          </el-form-item>
          <el-form-item label="图片链接地址:" prop="pic">
            <el-input v-model="listQuery.pic"></el-input>
          </el-form-item>
          <el-form-item label="商品货号:" prop="product_sn">
            <el-input
              v-model="listQuery.product_sn"
              class="input-width"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品售价:" prop="price">
            <el-input v-model="listQuery.price" class="input-width"></el-input>
          </el-form-item>
          <el-form-item label="市场价:" prop="original_price">
            <el-input
              v-model="listQuery.original_price"
              class="input-width"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品库存:" prop="stock">
            <el-input v-model="listQuery.stock" class="input-width"></el-input>
          </el-form-item>
          <el-form-item label="计量单位:" prop="unit">
            <el-input v-model="listQuery.unit" class="input-width"></el-input>
          </el-form-item>
          <el-form-item label="商品重量:" prop="weight">
            <el-input v-model="listQuery.weight" class="input-width"></el-input
            >克
          </el-form-item>
          <el-form-item label="排序:" prop="sort">
            <el-input v-model="listQuery.sort" class="input-width"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { fetchCateList, fetchBrandList, addProduct } from "@/api/product";

export default {
  name: "productadd",
  data: function () {
    return {
      listQuery: {
        brand_id: null, //商品品牌id
        brand_name: "", //商品品牌名称
        delete_status: 0, //删除标志位，默认填0，表示未删除
        description: "", //商品介绍
        name: "", //商品名称
        original_price: 0, //市场价
        pic: "", //商品图片的url地址
        price: 0, //商品售价
        product_category_id: null, //分类id
        product_category_name: "", //分类名称
        product_sn: "", //商品货号
        sort: 0, //排序
        stock: 0, //商品库存
        sub_title: "", //副标题
        unit: "", //计量单位
        weight: 0, //商品重量
        sale: 0, //商品销量
        publish_status: 0, //上架
        new_status: 0, //新品
        recommand_status: 0, //推荐
        verify_status: 0, //审核状态
      },
      //验证规则
      rules: {
        product_category_id: [
          { required: true, message: "请选择分类", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 3,
            max: 100,
            message: "长度在3-100个字符之间",
            trigger: "blur",
          },
        ],
        sub_title: [
          { required: true, message: "请输入副标题名称", trigger: "blur" },
        ],
        brand_id: [{ required: true, message: "请选择品牌", trigger: "blur" }],
        description: [
          { required: true, message: "请输入商品介绍", trigger: "blur" },
        ],
        pic: [
          { required: true, message: "请输入图片链接地址", trigger: "blur" },
        ],
      },
      productCateOptions: [], //分类的options数组
      productCateValue: null, //选中的分类
      brandOptions: [], //商品品牌列表
    };
  },
  mounted() {
    //获取数据
    this.getCateData();
    this.getBrandData();
  },
  methods: {
    async getCateData() {
      var res = await fetchCateList();
      console.log(res);
      //重组数据
      var data = res.data;
      data.forEach((i) => {
        let children = []; //放子节点数据
        //重组子级节点数据
        i.children.forEach((j) => {
          children.push({
            label: j.name,
            value: j.id,
          });
        });
        this.productCateOptions.push({
          label: i.name,
          value: i.id,
          children: children,
        });
      });
      console.log(this.productCateOptions);
    },
    async getBrandData() {
      var res = await fetchBrandList();
      console.log(res);
      this.brandOptions = res.data;
    },
    //提交表单的函数
    submitForm(formName) {
      //validate 是一个函数，功能是对表单进行验证
      //参数是回调函数， 回调函数中的参数 valid 的值可以是 true（验证通过） 或false（验证失败）
      //console.log(this.$refs[formName]);//element ui 封装的 表单组件
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          //验证通过
          console.log("可以提交表单了");
          //添加商品二级分类名称、商品的品牌名称
          this.brandOptions.forEach((i) => {
            if (i.id == this.listQuery.brand_id) {
              this.listQuery.brand_name = i.name;
            }
          });
          this.productCateOptions.forEach((i) => {
            i.children.forEach((j) => {
              if (j.value == this.listQuery.product_category_id) {
                this.listQuery.product_category_name = j.label;
              }
            });
          });
          console.log(this.listQuery);
          //调用 后台接口，添加 商品数据
          addProduct(this.listQuery).then((res) => {
            //console.log(res);
            if (res.status == 200) {
              //提示
              this.$message({
                message: "恭喜你，添加了一条商品记录",
                type: "success",
              });
              //跳转到列表页
              this.$router.push("/pms/product");
            }
          });
        } else {
          //验证没通过
          console.log("验证失败");
          return false;
        }
      });
    },
  },
  watch: {
    //监听级联菜单的选中的数据是否发生变化了
    productCateValue(newV) {
      console.log(newV);
      //找到 数组的1号元素，赋值给 product_category_id
      this.listQuery.product_category_id = newV[1];
    },
  },
};
</script>

<style scoped lang="scss">
.add_con {
  margin: 20px;
  .box-card {
    margin-bottom: 20px;
  }
}
</style>